<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试</title>
</head>
<body>
    <h1>API连接测试</h1>
    <button onclick="testAPI()">测试API连接</button>
    <div id="result"></div>

    <script>
        async function testAPI() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '测试中...';
            
            try {
                // 测试基础API连接
                const response = await fetch('http://localhost:8080/api/auth/validate', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });
                
                const data = await response.text();
                resultDiv.innerHTML = `
                    <h3>API连接测试结果:</h3>
                    <p>状态码: ${response.status}</p>
                    <p>响应: ${data}</p>
                `;
            } catch (error) {
                resultDiv.innerHTML = `
                    <h3>API连接失败:</h3>
                    <p>错误: ${error.message}</p>
                    <p>请检查后端服务是否运行在 http://localhost:8080</p>
                `;
            }
        }
    </script>
</body>
</html>
